<template>
  <div class="team-stats">
    <div class="header">
      <span class="back" @click="goBack">&lt; 返回</span>
    </div>
    <div class="filter-bar">
      <select v-model="memberFilter">
        <option value="">全部成员</option>
        <option v-for="m in members" :key="m.name" :value="m.name">{{ m.name }}</option>
      </select>
      <div class="type-tabs">
        <button :class="{active: typeFilter===''}" @click="typeFilter=''">全部类型</button>
        <button :class="{active: typeFilter==='维修'}" @click="typeFilter='维修'">维修</button>
        <button :class="{active: typeFilter==='安装'}" @click="typeFilter='安装'">安装</button>
        <button :class="{active: typeFilter==='维护'}" @click="typeFilter='维护'">维护</button>
      </div>
    </div>
    <div class="card">
      <div class="card-title">班组成员任务统计</div>
      <div class="chart-bar">
        <canvas ref="barChart" width="420" height="260" style="display:block; margin-left:32px;"></canvas>
      </div>
    </div>
    <div class="card">
      <div class="card-title">班组成员效率统计雷达图</div>
      <div class="chart-radar">
        <canvas ref="radarChart" width="320" height="260"></canvas>
      </div>
    </div>
    <div class="card" v-for="m in filteredMembers" :key="m.name">
      <div class="member-row">
        <span class="name">{{ m.name }}</span>
        <span class="status online">在线</span>
      </div>
      <div class="role-type">
        <span class="role-icon">{{ m.type==='维修'?'🔧':m.type==='安装'?'🔧':'🛠️' }}</span>
        <span class="role">{{ m.type }}</span>
      </div>
      <div class="progress-bar">
        <div class="progress" :style="{width: m.ontime+'%'}"></div>
      </div>
      <div class="meta">
        <span>平均耗时：{{ m.time }}/单</span>
        <span>准时率：{{ m.ontime }}%</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useTeamStore } from '../stores/TeamStatsStore.js'

const router = useRouter()
const route = useRoute()
const teamStore = useTeamStore()

const team = computed(() => teamStore.teams.find(t => t.id === parseInt(route.params.id)) || {})
const members = computed(() => (team.value.teamStats ? team.value.teamStats.members : []))
const memberFilter = ref('')
const typeFilter = ref('')
const filteredMembers = computed(() => {
  return members.value.filter(m =>
    (!memberFilter.value || m.name === memberFilter.value) &&
    (!typeFilter.value || m.type === typeFilter.value)
  )
})
const barChart = ref(null)
const radarChart = ref(null)

function goBack() {
  router.back()
}

onMounted(() => {
  // 更详细的柱状图+折线图
  if (barChart.value) {
    const ctx = barChart.value.getContext('2d')
    ctx.clearRect(0,0,340,220)
    // 图表参数
    const data = members.value
    const barWidth = 32
    const gap = 36
    const baseX = 50
    const baseY = 180
    const chartHeight = 120
    // 计算最大任务数和最大平均耗时
    const maxTasks = Math.max(...data.map(m=>m.tasks), 10)
    const maxTime = Math.max(...data.map(m=>parseFloat(m.time)), 1)
    // 图例
    ctx.font = '13px sans-serif'
    ctx.fillStyle = '#409eff'
    ctx.fillRect(10,10,16,8)
    ctx.fillStyle = '#222'
    ctx.fillText('任务数',30,18)
    ctx.strokeStyle = '#f45ca4'
    ctx.beginPath(); ctx.moveTo(90,14); ctx.lineTo(110,14); ctx.stroke()
    ctx.fillStyle = '#f45ca4'
    ctx.fillText('平均耗时',115,18)
    ctx.fillStyle = '#67c23a'
    ctx.beginPath(); ctx.arc(170,14,4,0,2*Math.PI); ctx.fill()
    ctx.fillStyle = '#222'
    ctx.fillText('准时率',180,18)
    // 柱状图（任务数）
    data.forEach((m,i) => {
      const x = baseX + i*(barWidth+gap)
      const h = m.tasks/maxTasks*chartHeight
      ctx.fillStyle = '#409eff'
      ctx.fillRect(x, baseY-h, barWidth, h)
      // 柱顶数值
      ctx.fillStyle = '#222'
      ctx.textAlign = 'center'
      ctx.font = '13px sans-serif'
      ctx.fillText(m.tasks, x+barWidth/2, baseY-h-8)
      // 成员名（优化显示）
      ctx.font = 'bold 14px sans-serif'
      ctx.fillStyle = '#222'
      ctx.textAlign = 'center'
      ctx.fillText(m.name, x+barWidth/2, baseY+28)
    })
    // 折线图（平均耗时）
    ctx.strokeStyle = '#f45ca4'
    ctx.beginPath()
    data.forEach((m,i) => {
      const x = baseX + i*(barWidth+gap) + barWidth/2
      const y = baseY - (parseFloat(m.time)/maxTime)*chartHeight
      if(i===0) ctx.moveTo(x,y)
      else ctx.lineTo(x,y)
    })
    ctx.stroke()
    // 折线点和数值
    data.forEach((m,i) => {
      const x = baseX + i*(barWidth+gap) + barWidth/2
      const y = baseY - (parseFloat(m.time)/maxTime)*chartHeight
      ctx.fillStyle = '#f45ca4'
      ctx.beginPath(); ctx.arc(x,y,4,0,2*Math.PI); ctx.fill()
      ctx.font = '12px sans-serif'
      ctx.fillStyle = '#f45ca4'
      ctx.textAlign = 'center'
      ctx.fillText(m.time, x, y-10)
    })
    // 准时率（绿色小圆点）
    data.forEach((m,i) => {
      const x = baseX + i*(barWidth+gap) + barWidth/2
      const y = baseY - (m.ontime/100)*chartHeight
      ctx.fillStyle = '#67c23a'
      ctx.beginPath(); ctx.arc(x, y, 4, 0, 2*Math.PI); ctx.fill()
      ctx.font = '11px sans-serif'
      ctx.fillStyle = '#67c23a'
      ctx.fillText(m.ontime+'%', x, y-10)
    })
    // y轴刻度
    ctx.font = '12px sans-serif'
    ctx.fillStyle = '#888'
    ctx.textAlign = 'right'
    for(let i=0;i<=5;i++){
      const y = baseY - i*chartHeight/5
      ctx.fillText(Math.round(maxTasks*i/5), baseX-8, y+4)
      ctx.beginPath(); ctx.strokeStyle='#eee'; ctx.moveTo(baseX-4,y); ctx.lineTo(baseX+data.length*(barWidth+gap),y); ctx.stroke()
    }
    // y轴标题
    ctx.save()
    ctx.translate(18,baseY-chartHeight/2)
    ctx.rotate(-Math.PI/2)
    ctx.fillStyle = '#888'
    ctx.font = '13px sans-serif'
    ctx.fillText('任务数/平均耗时/准时率',0,0)
    ctx.restore()
  }
  if (radarChart.value) {
    const ctx = radarChart.value.getContext('2d')
    ctx.clearRect(0,0,220,180)
    const center = [110,100]
    const r = 70
    const points = [1,0.9,0.8,0.95,1]
    ctx.strokeStyle = '#409eff'
    ctx.beginPath()
    for(let i=0;i<5;i++){
      const angle = Math.PI/2 + i*2*Math.PI/5
      const x = center[0]+r*points[i]*Math.cos(angle)
      const y = center[1]-r*points[i]*Math.sin(angle)
      if(i===0) ctx.moveTo(x,y)
      else ctx.lineTo(x,y)
    }
    ctx.closePath()
    ctx.stroke()
    ctx.globalAlpha=0.1
    ctx.fillStyle='#409eff'
    ctx.fill()
    ctx.globalAlpha=1
    // 画雷达图坐标轴
    ctx.strokeStyle='#bbb'
    for(let i=0;i<5;i++){
      const angle = Math.PI/2 + i*2*Math.PI/5
      ctx.beginPath()
      ctx.moveTo(center[0],center[1])
      ctx.lineTo(center[0]+r*Math.cos(angle),center[1]-r*Math.sin(angle))
      ctx.stroke()
    }
    // 画标签
    ctx.fillStyle='#888'
    ctx.font='13px sans-serif'
    ctx.fillText('完成率',center[0],center[1]-r-8)
    ctx.fillText('准时率',center[0]+r+8,center[1]+4)
    ctx.fillText('客户评分',center[0],center[1]+r+16)
    ctx.fillText('效率',center[0]-r-24,center[1]+4)
  }
})
</script>

<style scoped>
.team-stats { background: #f7f8fa; min-height: 100vh; max-width: 375px; margin: 0 auto; box-sizing: border-box; padding-bottom: 24px; }
.header { display: flex; align-items: center; height: 48px; background: #fff; font-size: 16px; font-weight: bold; border-bottom: 1px solid #f0f0f0; padding: 0 16px; }
.back { color: #333; cursor: pointer; font-size: 18px; }
.filter-bar { background: #fff; border-radius: 10px; margin: 12px 8px 0 8px; padding: 12px 12px 8px 12px; box-shadow: 0 1px 4px #eee; }
.filter-bar select { width: 100%; font-size: 16px; padding: 6px 8px; border-radius: 6px; border: 1px solid #e5e6eb; margin-bottom: 10px; }
.type-tabs { display: flex; gap: 8px; margin-bottom: 2px; }
.type-tabs button { flex: 1; border: none; border-radius: 6px; padding: 7px 0; font-size: 15px; background: #f7f8fa; color: #409eff; cursor: pointer; transition: 0.2s; }
.type-tabs button.active { background: #409eff; color: #fff; }
.card { background: #fff; border-radius: 14px; margin: 16px 8px 0 8px; box-shadow: 0 1px 4px #eee; padding: 16px 10px 18px 10px; }
.card-title { font-size: 16px; font-weight: bold; color: #222; margin-bottom: 10px; }
.chart-bar, .chart-radar { display: flex; justify-content: center; align-items: center; }
.chart-bar canvas { width: 420px; height: 260px; }
.chart-radar canvas { width: 320px; height: 260px; }
.member-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.name { font-weight: bold; font-size: 15px; color: #222; }
.status { background: #e6f9e6; color: #2ecc40; border-radius: 4px; font-size: 13px; padding: 1px 8px; }
.role-type { display: flex; align-items: center; gap: 6px; color: #409eff; font-size: 15px; margin-bottom: 6px; }
.role-icon { font-size: 17px; }
.role { font-size: 15px; }
.progress-bar { background: #e6f0ff; border-radius: 6px; height: 7px; margin: 6px 0; width: 100%; }
.progress { background: #67c23a; height: 100%; border-radius: 6px; transition: width 0.3s; }
.meta { display: flex; justify-content: space-between; color: #888; font-size: 13px; margin-top: 2px; }
</style> 